<template>
    <div class="main">
        <div class="top_box">
            <el-select style="width:200px" v-model="cate_type" placeholder="请选择题目大类">
                <el-option v-for="item in timuType" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>
            <el-button type="warning" style="margin-left:20px" icon="el-icon-search" size="small" @click="getInfo">搜索</el-button>
            <el-button style="margin-left:20px" size="small" @click="reset" type="primary">重置</el-button>
        </div>

        <el-table :data="data" border style="width: 100%; " height="100%">
            <el-table-column prop="name" label="题目" width="550">
            </el-table-column>
            <el-table-column prop="type_name" label="题目大类" width="200">
            </el-table-column>
            <el-table-column prop="cate_name" label="题目分类" width="400">
            </el-table-column>
            <el-table-column label="选项名称" width="150">
                <template slot-scope="{row}">
                    <div v-for="(item, index) in row.option" :key="index" class="table_item">
                        {{ item.option_name }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="选择选项次数" width="150">
                <template slot-scope="{row}">
                    <div v-for="(item, index) in row.option" :key="index" class="table_item">
                        {{ item.num }}
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="子选项" width="150">
                <template slot-scope="{row}">
                    <el-button type="success" @click="suboption(row)" v-if=" ifSuboption(row)">查看子选项详情</el-button>
                    <el-button type="warning" v-else>暂无子选项</el-button>
                </template>
            </el-table-column>
            <el-table-column label="选项总数" prop="option_totals" align="center"></el-table-column>
        </el-table>
        <el-dialog title="子选项详情" :visible.sync="dialogTableVisible" width="50%">
            <div class="suboptionTitle">题目<span>{{suboptionRow.name}}</span></div>
            <el-table :data="suboptionRow.option" border>
                <el-table-column label="选项" prop="option_name">
                </el-table-column>
                <el-table-column label="子选项">
                    <template slot-scope="{row}">
                        <div v-for="(item, index) in row.options" :key="index" class="table_item">
                            {{ item.option_name }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="子选项次数" width="150">
                    <template slot-scope="{row}">
                        <div v-for="(item, index) in row.options" :key="index" class="table_item">
                            {{ item.num }}
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <el-pagination class="main-pagination" :total="total" :current-page.sync="page" :page-size="limit" layout="prev, pager, next, jumper,total" @current-change="getInfo" hide-on-single-page></el-pagination>
    </div>
</template>

<script>
import {
    get, del, post
} from "@/assets/js/http.js";
export default {
    data() {
        return {
            total: 0,
            limit: 20,
            page: 1,
            data: [],
            cate_type: "",
            timuType: [
                {
                    id: 1,
                    name: "公路基础设施满意度评价"
                },
                {
                    id: 2,
                    name: "收费服务满意度评价"
                },
                {
                    id: 3,
                    name: "救援服务满意度评价"
                },
                {
                    id: 4,
                    name: "出行信息服务评价"
                },
                {
                    id: 5,
                    name: "运营品牌满意度评价"
                },
                {
                    id: 6,
                    name: "其它"
                },
            ],
            dialogTableVisible: false,
            suboptionRow: []
        }
    },
    methods: {
        getInfo(index = 1) {
            post({
                url: "/admin/answer.Subject/option_census",
                data: {
                    page: index,
                    limit: this.limit,
                    cate_type: this.cate_type
                },
                loading: true
            }).then(res => {
                this.data = res
                this.total = res.total
            })
        },
        // 查看子选项
        suboption(row) {
            this.dialogTableVisible = true
            this.suboptionRow = row
            console.log(row);
        },
        // 重置
        reset() {
            this.cate_type = ""
            this.getInfo()
        },
    },
    computed: {
        ifSuboption() {
            return (row) => {
                return row.option?.filter(item => {
                    return item.options.length
                }).length >= 1

            }
        }
    },
    mounted() {
        this.getInfo()
    }
}
</script>

<style lang="scss" scoped>
.table_border {
    border-bottom: 1px solid #222;
}

.table_border:last-child {
    border: none;
}

.table_item {
    border-bottom: 1px solid #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;

    &:last-child {
        border: none;
    }
}
.suboptionTitle {
    color: #23cefd;
    font-size: 24px;
    font-family: PangMenZhengDao;
    font-weight: 400;
    color: #222;
    margin-bottom: 20px;
}
</style>